<template>
  <div class="userList">
    <div class="header">
      <el-row>
        <el-col :span="20">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item separator-class="el-icon-arrow-right">首页</el-breadcrumb-item>
            <el-breadcrumb-item>科目列表</el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
        <el-col :span="2">
          <el-button type="success" size="mini" @click="addUser" >新增科目</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" size="mini" @click="getSearch">刷新</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table height="69vh" :data="list" stripe :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" style="width: 100%">
      <el-table-column prop="subjectCode" label="科目编码" show-overflow-tooltip />
      <el-table-column prop="subjectName" label="一级科目" />
      <!-- <el-table-column prop="subjectName" label="父级科目" /> -->
      <el-table-column prop="originally" label="期初金额" />
      <el-table-column prop="amount" label="金额" />
      <!-- <el-table-column prop="customerName" label="科目算法" /> -->
      <el-table-column prop="createOperator" label="科目创建人" />
      <el-table-column prop="createTime" label="科目创建时间">
        <template slot="header">
          <el-input @input="getSearch" v-model="search" size="mini" prefix-icon="el-icon-search" placeholder="请输入科目" />
        </template>
      </el-table-column>

      <!-- <el-table-column width="200" label="操作">
        <template slot="header">
          <el-input @input="getSearch" v-model="search" size="mini" prefix-icon="el-icon-search" placeholder="请输入科目" />
        </template>
        <template slot-scope="scope">
          <el-button type="warning" size="mini" @click="upd(scope.row)">修改</el-button>
          <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="父级科目:">
          <el-cascader clearable :props="props" :options="options" v-model="form.fatherSubjectCode" placeholder="关联父级科目" style="width: 100%" filterable></el-cascader>
        </el-form-item>
        <el-form-item label="科目编码:">
          <el-input v-model="form.subejctCode" disabled placeholder="系统自动生成"></el-input>
        </el-form-item>
        <el-form-item label="科目名称:" prop="subjectName">
          <el-input v-model="form.subjectName" placeholder="输入科目名称"></el-input>
        </el-form-item>
        <el-form-item label="期初金额:">
          <el-input v-model="form.originally" placeholder="输入期初金额"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
    <el-pagination :page-size="10" :pager-count="11" @current-change="pageNum" layout="prev, pager, next" :total="totalSize">
    </el-pagination>
  </div>
</template>

<script>
import {
  subjectList,
  addSubject,
  allSubjectList,
} from "../../network/business";

export default {
  name: "index",
  data() {
    return {
      options: [],
      search: "",
      dialogFormVisible: false,
      disabled: false,
      title: "新增科目",
      rules: {
        subjectName: [
          { required: true, message: "请输入科目名称", trigger: "blur" },
        ],
      },
      form: {
        fatherSubjectCode: "",
        subejctCode: "",
        subjectName: "",
        originally: "",
        userId: "123",
      },
      totalSize: 0,
      list: [],
      dataPage: {
        pageNum: 1,
        pageSize: 10,
        searchVal: "",
      },
      props: {
        label: "subjectName",
        value: "subjectCode",
        disabled: "originally",
        checkStrictly: true,
        children: "list",
      },
      listCopy: [],
      loading:false,
    };
  },
  created() {
    this.getSubjectList();
  },
  methods: {
    // 递归得到所有的科目选项
    async getAllList(list) {
      let i = 0;
      if (list && list.length > 0) {
        list.forEach((item) => {
          allSubjectList(item.subjectCode).then((res) => {
            i++;
            item["list"] = res.data.content;
            if (i == list.length) {
              this.closeLoading();
              this.dialogFormVisible = true;
              this.options = this.setArr(list);
              console.log(this.options);
            }
          });
        });
      }
    },

    //设置子级没有值的时候就删除
    setArr(list) {
      if (list && list.length > 0) {
        list.forEach((item) => {
          if (item.list && item.list.length > 0) {
            this.setArr(item.list);
          } else {
            delete item.list;
          }
        });
      }
      return list;
    },
    pageNum(num) {
      this.dataPage.pageNum = num;
      this.getSubjectList();
    },
    getSearch() {
      this.dataPage.pageNum = 1;
      this.dataPage.searchVal = this.search;
      this.getSubjectList();
    },
    async getSubjectList(d = this.dataPage) {
      let res = await subjectList(d);
      if (res.code == 200 && res.data && res.data.content) {
        res.data.content.forEach((item) => {
          if (item.originally) {
            item.disabled = true;
          }
        });
        this.list = res.data.content;
        this.totalSize = res.data.totalSize;
      } else {
        this.$error(res.msg);
      }
    },

    async addUser() {
      this.showLoading();
      this.getAllList(this.list);
    },
    showLoading() {
      this.loading = this.$loading({
        lock: true,
        text: "加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    closeLoading() {
      this.loading.close();
    },
    cancel() {
      this.dialogFormVisible = false;
    },
    confirm() {
      this.$refs.form.validate(async (v) => {
        if (!v) {
          this.$message.error("请录入必填项");
          return;
        }
        let data = Object.assign({}, this.form);
        if (data.fatherSubjectCode && data.fatherSubjectCode.length > 0) {
          data.fatherSubjectCode =
            data.fatherSubjectCode[data.fatherSubjectCode.length - 1];
        }
        let res = await addSubject(data);
        console.log(res, "res");
        if (res.code == 200) {
          this.dialogFormVisible = false;
          this.$success("新增科目成功！");
          this.form = {
            fatherSubjectCode: "",
            subejctCode: "",
            subjectName: "",
            originally: "",
            userId: "123",
          };
          this.getSubjectList();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
  },
};
</script>

<style scoped lang="sass">
.header
  margin-bottom: 20px

  .el-select
    width: 100%

    ::v-deep .el-dialog
      width: 30%
      border-radius: 5px
</style>